<template>
  <div class="index-container">
    <h1 class="print_title">代课申报表</h1>
    <table class="print_data">
      <tbody>
        <tr>
          <td class="print_data_title">审批编号</td>
          <td class="print_data_value">{{ data.thirdNo }}</td>
          <td class="print_data_title">提交时间</td>
          <td class="print_data_value">
            {{ parseTime(data.createtime) }}
          </td>
        </tr>
        <tr>
          <td class="print_data_title">申请人</td>
          <td class="print_data_value">
            <ww-open-data :openid="data.reqUserid" type="userName" />
          </td>
          <td class="print_data_title">申请人部门</td>
          <td class="print_data_value"></td>
        </tr>
        <tr>
          <td class="print_data_title">当前审批状态</td>
          <td class="print_data_value" colspan="3">
            <span v-if="data.status === 0">未提交</span>
            <span v-if="data.status === 1">审批中</span>
            <span v-if="data.status === 2">已通过</span>
            <span v-if="data.status === 3">已驳回</span>
            <span v-if="data.status === 4">已取消</span>
          </td>
        </tr>
        <tr>
          <td class="print_data_title" colspan="4">申请内容</td>
        </tr>
        <tr>
          <td class="print_data_title">代课事由</td>
          <td class="print_data_value" colspan="3">
            <pre>{{ data.comment }}</pre>
          </td>
        </tr>
        <tr>
          <td class="print_data_space" colspan="4"></td>
        </tr>
        <template v-for="(course, index) in data.courses" :key="index">
          <tr>
            <td class="print_space_title" colspan="4">
              代课{{ data.courses.length > 1 ? index + 1 : '' }}：
            </td>
          </tr>
          <tr>
            <td class="print_data_title">代课老师</td>
            <td class="print_data_value">
              <pre><ww-open-data :openid="course.tarUserid" type="userName" /></pre>
            </td>
            <td class="print_data_title">被代老师</td>
            <td class="print_data_value">
              <pre><ww-open-data :openid="course.srcUserid" type="userName" /></pre>
            </td>
          </tr>
          <tr></tr>
          <tr>
            <td class="print_data_title">代课课程</td>
            <td class="print_data_value" colspan="3">
              <pre>{{ getCourseDesc(course) }}</pre>
            </td>
          </tr>
        </template>
        <tr>
          <td class="print_data_title" colspan="4">
            审批流程-
            <text v-if="data.status === 0">未提交</text>
            <text v-if="data.status === 1">审批中</text>
            <text v-if="data.status === 2">已通过</text>
            <text v-if="data.status === 3">已驳回</text>
            <text v-if="data.status === 4">已取消</text>
          </td>
        </tr>
        <tr>
          <td class="print_data_title print_data_title_center">审批节点</td>
          <td class="print_data_title print_data_title_center">审批人</td>
          <td class="print_data_title print_data_title_center" colspan="2">
            操作记录
          </td>
        </tr>
        <tr>
          <td class="print_data_value print_data_title_center" rowspan="1">
            <div>审批状态</div>
            <div v-if="data.status === 1">审批中</div>
            <div v-if="data.status === 2">已通过</div>
            <div v-if="data.status === 3">已驳回</div>
            <div v-if="data.status === 4">已取消</div>
          </td>
          <td class="print_data_value print_data_title_center">
            <ww-open-data :openid="data.auditUserid" type="userName" />
          </td>
          <td class="print_data_value print_data_title_center" colspan="2">
            <div></div>
            <div v-if="data.status === 2">已通过</div>
            <div v-if="data.status === 3">已驳回</div>
            <div v-if="data.status === 4">已取消</div>
            {{ data.status > 1 ? parseTime(data.audittime) : '' }}
          </td>
        </tr>
        <tr>
          <td class="print_data_title">备注信息</td>
          <td class="print_data_value" colspan="3">
            {{ data.auditNotes }}
          </td>
        </tr>
      </tbody>
    </table>
    <div class="print_info">
      <div class="print_info_date">打印日期：{{ parseTime(new Date()) }}</div>
      <br />
      <div class="print_info_user">
        打印人：
        <ww-open-data :openid="userId" type="userName" />
      </div>
    </div>

    <div class="print_qr">
      <div class="print_qr_image_wrap">
        <vue-qr :margin="5" :size="100" :text="getQrImgUrl" />
      </div>
      <p class="print_qr_text">
        使用手机企业微信
        <br />
        扫一扫
      </p>
    </div>
  </div>
</template>

<script>
  import { getOne } from '@/api/dksb'
  import { useUserStore } from '@/store/modules/user'
  import vueQr from 'vue-qr/src/packages/vue-qr.vue'

  import {
    gradeOptions,
    claszOptions,
    coursetimeOptions,
    subjectOptions,
  } from '@/config'
  import { parseTime } from '@/utils'
  export default defineComponent({
    name: 'Detail',
    components: {
      vueQr,
    },
    setup(props, { emit }) {
      const { proxy } = getCurrentInstance()
      const route = useRoute()
      const userStore = useUserStore()
      const { userId } = userStore

      console.log(proxy)
      console.log(userId)
      console.log(props, emit)

      const state = reactive({
        chatId: '', //讨论组会话id
        data: {
          id: '',
          corpId: '',
          reqUserid: '',
          auditUserid: '',
          comment: '',
          thirdNo: '',
          templateId: '',
          courses: [],
          status: 0, //0-未提交；1-审批中；2-已通过；3-已驳回；4-已取消
        },
      })

      const loadData = async () => {
        const { data } = await getOne(route.params.thirdNo).catch(() => {})
        state.data = data
      }

      onMounted(() => {
        loadData()
      })

      const getCourseDesc = (course) => {
        const { eventdate, grade, clasz, coursetime, subject } = course
        return `${getOptLabel(
          subjectOptions,
          subject
        )} ${eventdate} ${getOptLabel(
          coursetimeOptions,
          coursetime
        )} ${getOptLabel(gradeOptions, grade)} ${getOptLabel(
          claszOptions,
          clasz
        )} `
      }

      const getOptLabel = (options, value) => {
        let label = ''
        options.some((op) => {
          if (op.value === value) {
            label = op.label
            return true
          }
          if (op.children) {
            label = getOptLabel(op.children, value)
            if (label) return true
          }
        })
        return label
      }

      const getQrImgUrl = () => {
        return `http://wx.xerllent.cn/dksb#/detail/${state.data.thirdNo}`
      }

      return {
        ...toRefs(state),
        getCourseDesc,
        parseTime,
        userId,
        getQrImgUrl,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .index-container {
    @media screen {
      width: 800px;
      margin: 0 auto;
    }
    .print_data {
      width: 100%;
      border-spacing: 1px;
      border-collapse: collapse;
      table-layout: fixed;
    }
    .print_title {
      margin-bottom: 20px;
      font-size: 15px;
      text-align: center;
    }
    .print_data_title {
      width: 20%;
      background-color: #f3f3f3;
      color: #000;
      font-size: 12px;
      text-align: center;
    }
    .print_data_value {
      width: 30%;
      background-color: #fff;
      font-size: 12px;
    }
    .print_data_value,
    .print_data_title {
      height: 18px;
      padding: 4px 12px;
      border: 1px solid #787878;
      overflow: hidden;
      word-break: break-word;
      word-wrap: break-word;
    }
    .print_data_space {
      height: 15px;
      background: #fff;
      border-right: 1px solid #787878;
      border-left: 1px solid #787878;
    }
    .print_space_title {
      height: 20px;
      background: #f3f3f3;
      text-align: center;
      border: 1px solid #787878;
      font-size: 12px;
    }
    .print_data_title_center {
      text-align: center;
    }
    .print_data_value pre {
      white-space: pre-wrap;
      overflow-wrap: break-word;
      font-family: 'lucida Grande', Verdana, 'Microsoft YaHei';
    }
    .print_info {
      float: right;
      padding-top: 25px;
      line-height: 20px;
      font-size: 12px;
      text-align: left;
    }
    .print_info_date,
    .print_info_user {
      display: inline-block;
      margin-left: 30px;
    }
    .print_qr {
      padding-top: 10px;
      height: 90px;
      padding-bottom: 20px;
    }
    .print_qr_text {
      font-size: 12px;
      line-height: 20px;
      padding-top: 15px;
    }
  }
</style>
